<!-- view -->
 <template>
  <div>
    <h1>{{ msg }}</h1>
    <div>
      <p>获取状态对象并取值:count: {{ $store.state.count }}</p>
      <button @click="increment">点击+1</button>
      <button @click="sub1">点击-1</button>
      <button @click="incrementNumber(2)">点击+2</button>
      <button @click="decrementNumber(2)">点击-2</button>
      <button @click="increment5">点击+5</button>
      <button @click="decrement5">点击-5</button>
      <button @click="increment10">点击+10</button>
      <button @click="update">对象新增属性</button>
      <button @click="update1">替换新对象</button>
    </div>
  </div>
</template> 

<script>
import { mapMutations } from "vuex";
import { DECREMENT_NUMBER, DECREMENT_BY_OBJ } from "../store/mutation-types";
export default {
  name: "Test7",
  props: {
    msg: String,
    person: {
      type: Object,
      default: function () {
        return { name: "zhangsan", age: 25 };
      },
    },
  },
  methods: {
    /* incrementNumber(n) {
      this.$store.commit("incrementNumber", n);
    }, */
    increment5() {
      this.$store.commit("incrementByObj", {
        amount: 5,
      });
    },
    increment10() {
      this.$store.commit({
        type: "incrementByObj",
        amount: 10,
      });
    },
    update() {
      //console.log("update:之前:" + this.msg);
      //console.log("update:之前:" + this.person.name);
      console.log("update:之前:" + JSON.stringify(this.person));
      this.$set(this.person, "age", 35);
      this.$set(this.person, "gender", "male");
      console.log("update:之后:" + JSON.stringify(this.person));
    },
    update1() {
      console.log("update:之前:" + JSON.stringify(this.person));
      this.person = { ...this.person, type: "黄种人" };
      console.log("update:之后:" + JSON.stringify(this.person));
    },
    decrementNumber(n) {
      this.$store.commit(DECREMENT_NUMBER, n);
    },
    decrement5() {
      this.$store.commit({
        type: DECREMENT_BY_OBJ,
        amount: 5,
      });
    },
    ...mapMutations([
      "increment", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      "decrement", // 将 `this.decrement()` 映射为 `this.$store.commit('decrement')`
      // `mapMutations` 也支持载荷：
      "incrementNumber", // 将 `this.incrementNumber(amount)` 映射为 `this.$store.commit('incrementNumber', amount)`
    ]),
    ...mapMutations({
      sub1: "decrement", // 将 `this.sub1()` 映射为 `this.$store.commit('decrement')`
    }),
  },
};
</script>
